#plate.front {
  transform: rotateY(0deg);
}

.wing {
  background-size: contain;
  position: absolute;
  transform-origin: 0 0 0;
  perspective: 1;
  perspective-origin: 50% 50%;
  backface-visibility: hidden;
  transition: all 1.3s linear;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  border-top: 240px solid hsla(0, 0%, 0%, 0);
  border-bottom: 0px solid hsla(0, 0%, 0%, 0);
  border-right: 100px solid hsl(0, 0%, 88%);
  width: 0;
  height: 0;
  bottom: 0;
}

#container {
  perspective: 600;
  perspective-origin: 200px 131px;
  transform-style: preserve-3d;
  transition: all 0.8s ease-in-out;
  backface-visibility: hidden;
  position: relative;
  width: 400px;
  height: 260px;
  top: 40px;
  text-align: center;
  display: block;
  margin: auto;
}

#plate {
  z-index:3;
  background: hsl(0, 0%, 88%);
  transform: rotateY(-180deg);
  position: relative;
  box-sizing: border-box;
  padding: 20px;
  text-align: center;
  backface-visibility: hidden;
  width: 400px;
  height: 260px;
  top: 300px;
  transition: all 0.8s ease-in-out;
  margin: auto;
}

#left-wing,#right-wing {
  transform-style: preserve-3d;
  width: 200px;
  height: 260px;
  display: block;
  position: absolute;
  top: 0px;
  transition: all 1s ease-in-out;
}

#left-wing {
  transform: rotateZ(0deg);
  transform-origin: 100% 50% 0;
  left: 0;
}

#right-wing {
  transform: rotateZ(0deg);
  transform-origin: 0% 50%;
  left: 199px;
}

.wing1 {
  transform-origin: 100% 100%;
  transform: translateY(-38px) translateX(8px) rotateZ(22.62deg) skewY(-22.62deg);
}

.wing2 {
  transform: rotateZ(22.62deg);
  transform-origin: 100% 100%;
  border-left: 100px solid hsl(0, 0%, 88%);
  border-right: none;
  left: 100px;
}

.wing3 {
  transform: rotateZ(-22.62deg);
  transform-origin: 0% 100%;
  border-right: 100px solid hsl(0, 0%, 88%);
}

.wing4 {
  transform: translateY(-38px) translateX(-8px) rotateZ(-22.62deg) skewY(22.62deg);
  transform-origin: 0% 100%;
  border-right: none;
  border-left: 100px solid hsl(0, 0%, 88%);
  left: 100px;
}

#container.hover #left-wing {
  transform: rotateY(60deg);
}

#container.hover #right-wing {
  transform: rotateY(-60deg);
}

#container.hover.fly_away_first {
  transform: translatex(-100px) translateZ(300px) rotateX(42deg) rotateY(-11deg) rotateZ(27deg);
  transition-delay: 0;
  transition-duration: 0.4s;
  transition-timing-function: ease-out;
}

#container.hover.fly_away_first.fly_away {
  transform: translateX(600px) translateY(-400px) translateZ(-5000px) rotateX(66deg) rotateY(-12deg) rotateZ(36deg);
  transition: transform 2s ease-out, opacity 1.5s 0.5s linear;
  opacity: 0;
}

html {
  paddind: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
  background-color: #001;
  background-image: radial-gradient(white 2%, transparent 3%), radial-gradient(white 1%, transparent 2%), radial-gradient(white 2%, transparent 3%);
  background-size: 100px 100px;
  background-position: 0 0, 20px 50px, 60px 10px;
}

body {
  overflow: hidden;
  padding:0;
  perspective: 800;
  perspective-origin: 50% 50%;
  background-image: linear-gradient(hsla(0, 0%, 13%, 1) 0%,hsla(0, 0%, 16%, 0.71) 50%,hsl(0, 0%, 34%) 50%, hsl(0, 0%, 15%) 100%);
  height: 100%;
}

#container.hover .wing1 {
  transform: translateY(-38px) translateX(8px) rotateZ(22.62deg) rotateY(-60deg) skewY(-22.62deg);
  border-right: 100px solid hsl(0, 0%, 95%);
}

#container.hover .wing2 {
  border-left: 100px solid hsl(0, 0%, 85%);
}

#container.hover .wing3 {
  border-right: 100px solid hsl(0, 0%, 71%);
}

#container.hover .wing4 {
  transform: translateY(-38px) translateX(-8px) rotateZ(-22.62deg) rotateY(60deg) skewY(20deg);
  border-left: 100px solid hsl(0, 0%, 95%);
}

#container.hover {
  transform: rotateX(54deg) rotateY(-10deg) rotateZ(25deg);
  transition-delay: 0.5s;
}

#container.beginning {
  transform: rotateY(180deg);
}

.message {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  height: 140px;
  font-smoothing: subpixel-antialiased;
  font-size: 14px;
  font-family: Helvetica, Arial, Verdana;
  line-height: 20px;
}

.send {
  appearance: none;
  transition: all 0.3s ease-in-out;
  border: 2px solid hsl(194, 100%, 72%);
  margin: 15px 0;
  padding: 10px;
  font-size: 20px;
  background-color: hsl(0, 0%, 94%);
}

.send:active {
  transform: scale(0.85);
  transition: all 10ms ease-in-out;
  background-color: hsl(0, 0%, 85%);
  border: 2px solid hsl(194, 30%, 55%);
}

.curvable.top_left {
  transform-origin: 100px 112px;
  transition-delay: 1300ms;
  width: 0;
  height: 0;
  top: 0;
  border-right: 202px solid hsla(0, 0%, 0%, 0);
  border-bottom: 202px solid hsla(0, 0%, 0%, 0);
  border-top: 223px solid hsl(0, 0%, 88%);
}

.curvable {
  transition: transform 800ms ease-out;
  backface-visibility: hidden;
  position: absolute;
  background-color: transparent;
  z-index: 0;
  width: 0;
}

.top_right.curvable {
  right: 0;
  border-left: 202px solid hsla(0, 0%, 0%, 0);
  border-bottom: 202px solid hsla(0, 0%, 0%, 0);
  border-top: 224px solid hsl(0, 0%, 88%);
  transform-origin: 96px 112px;
  transition-delay: 1650ms;
}

.bottom_left.curvable {
  transform-origin: 109px 0;
  transition-delay: 2100ms;
  width: 109px;
  height: 38px;
  background: hsl(0, 0%, 88%);
  bottom: 0;
  left: 0;
}

.bottom_left.curvable:after {
  position: absolute;
  content: "";
  border-right: 92px solid hsla(0, 0%, 0%, 0);
  border-bottom: 39px solid hsl(0, 0%, 88%);
  border-top: 37px solid hsla(0, 0%, 0%, 0);
  left: 109px;
  bottom: 0;
}

.bottom_right.curvable {
  transform-origin: 0px 0;
  transition-delay: 2450ms;
  width: 109px;
  height: 38px;
  background: hsl(0, 0%, 88%);
  bottom: 0;
  right: 0;

}

.bottom_right.curvable:after {
  position: absolute;
  content: "";
  border-left: 92px solid hsla(0, 0%, 0%, 0);
  border-bottom: 39px solid hsl(0, 0%, 88%);
  border-top: 37px solid hsla(0, 0%, 0%, 0);
  left: -92px;
  bottom: 0;
}

.top_left.curvable.curved {
  transform: rotate3d(1,-1.11,0,180deg);
}

.bottom_left.curvable.curved {
  transform: rotate3d(2.4867,1,0,-180deg);
}

.bottom_right.curvable.curved {
  transform: rotate3d(-2.4867,1,0,180deg);
}

.top_right.curvable.curved {
  transform: rotate3d(1,1.11,0,180deg);
}

#container.hover .wing {
  backface-visibility: visible;
}

#container.hover .curved {
  display: none;
}


#codepen_link{
  text-decoration: none;
  font-size: 22px;
  vertical-align: bottom;
}

#bottom {
  position: absolute;
  right: 7px;
  bottom: 0;
  width: 30px;
  height: 30px;
}